<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="list"
                class="title-icon" />项目管理</h3>
    <el-card>
      <div slot="header">
        <span>项目管理</span>
      </div>
      <el-form :inline="true"
               :model="formInline"
               class="form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="formInline.name"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <div style="margin-bottom: 10px;">
        <el-button type="primary"
                   size="small"
                   @click="handleEdit">

          新增项目
        </el-button>
      </div> -->
      <div style="border-top:1px solid #e6ebf5;margin-bottom:10px;">
        <el-table :data="tableData"
                  height="300"
                  border
                  stripe
                  style="width: 100%;margin-bottom:10px;">
          <el-table-column prop="id"
                           label="序号">
          </el-table-column>
          <el-table-column prop="no"
                           label="项目编号">
          </el-table-column>
          <el-table-column prop="name"
                           label="项目名称">
          </el-table-column>
          <el-table-column prop="money"
                           label="累计收款（元）">
          </el-table-column>
          <el-table-column prop="deviceNum"
                           label="绑定设备">
          </el-table-column>
          <el-table-column prop="deviceNormal"
                           label="正常设备">
          </el-table-column>
          <el-table-column prop="deviceBug"
                           label="异常设备">
          </el-table-column>
          <el-table-column prop="address"
                           label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="handleDetail(scope.row.id)">详情</el-button>
              <el-button type="text"
                         @click="handleEdit(scope.row.id)">编辑</el-button>
              <!-- <el-button type="text"
                         style="color:red"
                         @click="handleDelete(scope.row.id)"> 删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="page"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalPage"
                       style="float: right;">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getProjectList } from '@/api/project'
export default {
  name: "project",
  data () {
    return {
      formInline: {
        name: ''
      },
      currentPage4: 4,
      tableData: [],
      page: 1,
      pageSize: 10,
      totalPage: 0,
    };
  },
  mounted () {
    this.handleSearch();
  },
  methods: {
    handleDetail (id) {
      this.$router.push({        path: '/project/detail', query: {
          id: id
        }      })
    },
    handleEdit (id) {
      this.$router.push({ path: '/project/editDetail', query: { id: id } })
    },
    handleDelete () { },
    handleSearch () {
      getProjectList(this.formInline.name, this.page, this.pageSize).then(res => {
        this.tableData = res.data;
        this.totalPage = res.recordsFiltered
      })
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.handleSearch();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.handleSearch();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    padding: 18px 0;
    margin: 0 20px;
  }
}
.form-inline {
  border-bottom: 1px solid #e6ebf5;
  margin-bottom: 10px;
}
</style>
